import styled from 'styled-components';
import React, { useState } from 'react';

import { MakeRealPreview, MakeRealPreviewProps } from './make-real-preview';
import { MakeRealPrompts, MakeRealPromptsProps } from './make-real-prompts';

export interface MakeRealPanelProps {
    preview: MakeRealPreviewProps;
    prompts: MakeRealPromptsProps;
}

export const MakeRealPanel: React.FC<MakeRealPanelProps> = (props) => {

    const [result, setResult] = useState<any>();

    return (
        <Container>
            <MakeRealPrompts
                style={{
                    width: '40%',
                    borderRight: '1px solid #DEDEDE'
                }}
                {...props.prompts}
                onResult={async (result) => {
                    setResult(result);
                }}
            ></MakeRealPrompts>
            <MakeRealPreview
                style={{ flex: 1 }}
                {...props.preview}
                result={result}
            ></MakeRealPreview>
        </Container>
    );
}

const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
`;